<!DOCTYPE html>
<html>

	<head>
		<title></title>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<link rel="stylesheet" href="../../static/css/bootstrap.min.css">
		<link rel="stylesheet" href="../../static/plugins/layui/css/layui.css" />
		<link rel="stylesheet" href="../../static/css/font-awesome.min.css">
		<link rel="stylesheet" href="../../static/plugins/jqgrid/ui.jqgrid-bootstrap.css">
		<link rel="stylesheet" href="../../static/plugins/ztree/css/metroStyle/metroStyle.css">
		<link rel="stylesheet" href="../../static/css/main.css">
		<script src="../../static/libs/jquery.min.js"></script>
		<script src="../../static/plugins/layer/layer.js"></script>
		<script src="../../static/libs/bootstrap.min.js"></script>
		<script src="../../static/libs/vue.min.js"></script>
		<script src="../../static/plugins/jqgrid/grid.locale-cn.js"></script>
		<script src="../../static/plugins/jqgrid/jquery.jqGrid.min.js"></script>
		<script src="../../static/plugins/ztree/jquery.ztree.all.min.js"></script>
		<script src="../../static/js/common.js"></script>
		<style type="text/css">
			.form-inline .form-group {
				display: inline-block;
				margin-bottom: 10px;
				vertical-align: middle;
			}
		</style>
	</head>

	<body>
		<div id="rrapp" v-cloak>
			<!--列表-->
			<div v-show="showList">
				<div class="grid-btn">
					<a class="btn btn-danger" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
					<a class="btn btn-danger" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
					<a class="btn btn-danger" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
				</div>
				<table id="jqGrid"></table>
				<div id="jqGridPager"></div>
			</div>

			<!--保存OR修改-->
			<div v-show="!showList" class="panel panel-default">
				<div class="panel-heading">{{title}}</div>
				<div class="panel-body">
					<div class="row">
						<!--左边-->
						<div class="col-md-2" style="text-align: center;">
							<p id="upload_text"></p>
							<img src="../../static/image/head.png" id="upload_img" width="80%" height="80%">
							<br />
							<br />
							<button class="btn btn-default btn-block" id="upload_btn">上传照片</button>
						</div>
						<div class="col-md-1">
							<!--间隔-->
						</div>
						<!--中间-->
						<div class="col-md-5">
							<div class="form-group">
								<label>组别</label>
								<input type="number" class="form-control" v-model="wisArchivesPerson.personGroup" placeholder="组别" />
							</div>
							<div class="form-group">
								<label>姓名</label>
								<input type="text" class="form-control" v-model="wisArchivesPerson.personName" placeholder="姓名" />
							</div>
							<div class="form-group">
								<label>性别</label>
								<input type="radio" id="personSex1" value="男" name="personSex" v-bind:checked='radio_checked_personSex'>
								<label for="personSex1">男</label>
								<input type="radio" id="personSex0" value="女" name="personSex" v-bind:checked='!radio_checked_personSex'>
								<label for="personSex0">女</label>
							</div>
							<div class="form-group">
								<label>年龄</label>
								<input type="number" class="form-control" v-model="wisArchivesPerson.personAge" placeholder="年龄" />
							</div>
							<div class="form-group">
								<label>身份证号码</label>
								<input type="text" class="form-control" v-model="wisArchivesPerson.personIdcard" placeholder="身份证号码" />
							</div>
							<div class="form-group">
								<label>户主</label>
								<input type="text" class="form-control" v-model="wisArchivesPerson.personFamilyHeader" placeholder="户主" />
							</div>
							<div class="form-group">
								<label>家庭关系</label>
								<select name="personFamilyRelation" class="form-control">
									<template v-for="option in personFamilyRelationOptions">
										<option :value="option.value" v-if="option.value == wisArchivesPerson.personFamilyRelation" selected>
											{{ option.text }}
										</option>
										<option :value="option.value" v-else>
											{{ option.text }}
										</option>
									</template>
								</select>
							</div>
							<div class="form-group">
								<label>家庭人数</label>
								<input type="text" class="form-control" v-model="wisArchivesPerson.personFamilyNums" placeholder="家庭人数" />
							</div>
							<div class="form-group">
								<label>政治面貌</label>
								<input type="text" class="form-control" v-model="wisArchivesPerson.personPolitical" placeholder="政治面貌" />
							</div>
							<div class="form-group">
								<label>婚姻状况</label>
								<select name="personMarry" class="form-control">
									<template v-for="option in personMarryOptions">
										<option :value="option.value" v-if="option.value == wisArchivesPerson.personMarry" selected>
											{{ option.text }}
										</option>
										<option :value="option.value" v-else>
											{{ option.text }}
										</option>
									</template>

								</select>
							</div>

						</div>
						<!--右边-->
						<div class="col-md-4">
							<div class="form-group">
								<label>民族</label>
								<input type="text" class="form-control" v-model="wisArchivesPerson.personNational" placeholder="民族" />
							</div>
							<div class="form-group">
								<label>文化程度</label>
								<select name="personEducation" class="form-control">
									<template v-for="option in personEducationOptions">
										<option :value="option.value" v-if="option.value == wisArchivesPerson.personEducation" selected>
											{{ option.text }}
										</option>
										<option :value="option.value" v-else>
											{{ option.text }}
										</option>
									</template>
								</select>
							</div>
							<div class="form-group">
								<label>在校生状况</label>
								<input type="text" class="form-control" v-model="wisArchivesPerson.personAtschool" placeholder="在校生状况" />
							</div>
							<div class="form-group">
								<label>健康状况</label>
								<input type="text" class="form-control" v-model="wisArchivesPerson.personHealth" placeholder="健康状况" />
							</div>
							<div class="form-group">
								<label>劳动能力</label>
								<input type="text" class="form-control" v-model="wisArchivesPerson.personLabor" placeholder="劳动能力" />
							</div>
							<div class="form-group">
								<label>务工状况</label>
								<input type="text" class="form-control" v-model="wisArchivesPerson.personWorkSituation" placeholder="务工状况" />
							</div>
							<div class="form-group">
								<label>家庭属性</label>
								<input type="text" class="form-control" v-model="wisArchivesPerson.personFamilySituation" placeholder="家庭属性" />
							</div>
							<div class="form-group">
								<label>人均年收入</label>
								<input type="text" class="form-control" v-model="wisArchivesPerson.personIncomeYear" placeholder="人均年收入" />
							</div>
							<div class="form-group">
								<label>联系电话</label>
								<input type="text" class="form-control" v-model="wisArchivesPerson.personMobile" placeholder="联系电话" />
							</div>

						</div>
					</div>
				</div>
				<div class="panel panel-footer">
					<div class="text-right">
						<input type="button" class="btn btn-danger" @click="saveOrUpdate" value="确定" /> &nbsp;&nbsp;
						<input type="button" class="btn btn-warning" @click="reload" value="返回" />
					</div>
				</div>

			</div>
		</div>

		<script src="../../static/js/modules/wisarchivesperson.js"></script>
		<!--页面跳转-->
		<script type="text/javascript">
			//查看
			function view(pid) {
				var index = layer.open({
					type: 2,
					title: false,
					content: "../buss/wisarchivesperson.html?pid=" + pid,
					cancel: function(index, layero) {
						vm.reload();
						layer.close(index);
					}

				});
				//打开群众详情页面
				layer.full(index);

			}

			//初始化组件的值
			function initComponent() {
				//初始化任务类型
				$("select[name='taskType']").html(
					$("select[name='taskType']").html().replace('<option>' + vm.wisArchivesTask.taskType + '</option>', '').replace('<option selected="selected">' + vm.wisArchivesTask.taskType + '</option>', '')
				);
				$("select[name='taskType']").prepend('<option selected="selected">' + vm.wisArchivesTask.taskType + '</option>');
				//初始化任务状态
				switch(vm.wisArchivesTask.taskStatus) {
					case 1:
						taskStatus(1, '待办的');
						break;
					case 2:
						taskStatus(2, '处理中');
						break;
					case 3:
						taskStatus(3, '已处理');
						break;
					case 4:
						taskStatus(4, '已答复');
						break;
					default:
						break;
				}

				function taskStatus(option_value, option_text) {
					$("select[name='taskStatus'] option[value=" + option_value + "]").remove();
					$("select[name='taskStatus']").prepend('<option value="' + option_value + '" selected="selected">' + option_text + '</option>');
				}

			}
		</script>
		<!--上传图片-->
		<script src="../../static/plugins/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			layui.use('upload', function() {
				var $ = layui.jquery,
					upload = layui.upload;
				//普通图片上传
				var uploadInst = upload.render({
					elem: '#upload_btn',
					url: '/upload/',
					before: function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#upload_img').attr('src', result); //图片链接（base64）
						});
					},
					done: function(res) {
						//如果上传失败
						if(res.code > 0) {
							return layer.msg('上传失败');
						}
						//上传成功
					},
					error: function() {
						//演示失败状态，并实现重传
						var demoText = $('#upload_text');
						demoText.html('<span style="color: #FF5722;">上传失败</span>');
					}
				});
			});
		</script>
		<script type="text/javascript">
			//性别
			$("input[type='radio']").change(function() {
				vm.radio_checked = !vm.radio_checked;
				vm.wisArchivesPerson.personSex = $(this).val();
			});
			//家庭关系
			$("select[name='personFamilyRelation']").change(function() {
				vm.wisArchivesPerson.personFamilyRelation = $(this).val();
			});
			//婚姻状况
			$("select[name='personMarry']").change(function() {
				vm.wisArchivesPerson.personMarry = $(this).val();
			});
			//文化程度
			$("select[name='personEducation']").change(function() {
				vm.wisArchivesPerson.personEducation = $(this).val();
			});
		</script>
	</body>

</html>